<!-- NOTE: 第一期实物、待开发票、待评价不做 -->
<template>
  <div class="pd-all panel-box">
    <!-- 顶部：订单信息 -->
    <van-row @click="$goPage('order/detail', { order_no: data.order_no })">
      <van-col span="18">
        <van-tag type="primary" round>预订日期：{{data.reserve_date}}</van-tag>
      </van-col>
      <van-col span="6" class="relative text-right font-md">
        <span :class="stateColor">{{data.order_state_name}}</span>
      </van-col>
    </van-row>

    <!-- 商品信息 -->
    <van-row class="mg-top-sm mg-btm" @click="$goPage('order/detail', { order_no: data.order_no })">
      <van-col span="18" v-for="prod in data.product_list" :key="prod.product_id">
        <p class="mg-btm-xs font-md van-multi-ellipsis--l2">{{prod.product_name}}</p>
        <div class="font-sm c-gray-l">
          <!-- 实物 -->
          <template v-if="is_matter != 0">
            <!-- <div v-if="sku.sku_name">
            {{sku.sku_name}}
          </div>
          <div>
            ￥{{sku.sale_price}} × {{sku.qty}}
          </div> -->
          </template>
          <!-- 非实物 -->
          <div v-else>
            <span v-if="prod.product_kind == 3">
              <!-- 酒店 -->
              {{data.avail_date_desc}}&nbsp;{{prod.qty}}间
            </span>
            <span v-else>
              出游日期：{{data.avail_date_desc}}&nbsp;{{prod.qty}}张
            </span>
          </div>
        </div>
      </van-col>
      <van-col span="6" class="c-buy font-xs pull-right text-right">￥<em class="font-lg">{{data.pay_amount}}</em>
      </van-col>
    </van-row>

    <!-- 底部 -->
    <!-- panel-foot -->
    <div class="bord-top text-right">
      <div v-if="is_matter" class="pd-top-sm font-bold">共{{ data.product_list ? data.product_list.length : 0 }}件商品</div>
      <!-- 按钮组 -->
      <div class="pd-top-sm">
        <!-- <van-button
        size="small"
        type="default" plain hairline
      >更多</van-button> -->
        <van-button
          v-if="state == 0"
          size="small"
          type="default"
          plain
          hairline
          @click="onCancel"
        >取消</van-button>
        <van-button
          v-if="state == 0"
          size="small"
          type="primary"
          plain
          @click="onPayment"
        >继续支付</van-button>
        <van-button
          v-if="state == 6"
          size="small"
          type="default"
          plain
          hairline
          @click="doResendSms"
        >重发短信</van-button>
        <!-- <van-button
        v-if="state == 7 && !has_invoice"
        size="small"
        type="default" plain hairline
        @click="$goPage('order/detail', { order_no: data.order_no })"
      >申请发票</van-button> -->
        <van-button
          v-if="state != 0"
          size="small"
          type="default"
          plain
          hairline
          @click="onBooking"
        >再次预订</van-button>
        <!-- <van-button
        v-if="state == 6"
        size="small"
        type="primary"
        plain
      >查看物流</van-button> -->
        <!-- <van-button
        v-if="state == 6"
        size="small"
        type="default" plain hairline
      >确认收货</van-button> -->

        <!-- NOTE: 暂不判断实物 -->
        <!-- 交易完成不展示核销码 -->
        <van-button
          v-if="data.has_voucher && state != 7"
          size="small"
          type="primary"
          plain
          @click="$goPage('voucher', { order_no: data.order_no })"
        >核销码</van-button>
        <van-button
          v-if="state == 1 || state == 2"
          size="small"
          type="default"
          plain
          hairline
          @click="onDelt"
        >删除</van-button>
        <!-- <van-button
        v-if="state == 7 && !has_comment"
        size="small"
        type="primary"
        plain
        @click="$goPage('order/comment', { order_no: data.order_no })"
      >点评</van-button> -->
      </div>
    </div>

  </div>
</template>

<script>
  import {
    Row,
    Col,
    Tag,
    Button,
    Toast,
    Dialog,
  } from 'vant'

  import {
    cancelOrder,
    resendSms,
    deltOrder,
    getResubmitSecret,
  } from "@api/modules/order"
  import {
    getRole
  } from '@utils/role'

  import {
    ORDER_STATUS_LIST,
  } from '@data/dic/order'

  export default {
    name: 'order-list-block',
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Tag.name]: Tag,
      [Button.name]: Button,
    },
    props: {
      data: Object,
    },
    data() {
      return {}
    },
    computed: {
      state: function () { // 订单状态(0:待支付 1:超时关闭 2:用户关闭 3:系统关闭 4:已支付 5:待确认 6:待完成 7:交易完成)
        const data = this.data || {}
        return data.order_state
      },
      stateColor: function () {
        const status = this.state
        const obj = ORDER_STATUS_LIST.find((item) => {
          return item.key == status
        })
        return obj ? 'c-' + obj.styleType : ''
      },
      is_matter: function () { // 是否是实物
        return this.data.delivery == 1 || this.data.delivery == 2
      },
      has_invoice: function () { // 是否已开发票。开具发票状态(0:未开发票 1:已开发票 2:不可开发票)
        return this.invoice_state == 0
      },
      has_comment: function () { // 是否已评论。点评状态(0:未点评 1:已点评 2:不可点评)
        return this.comment_state == 0
      },
      firstProd: function () { // 第一个产品数据
        const data = this.data || {}
        const list = data.product_list || []
        return list[0] || {}
      },
    },

    methods: {
      onBooking() {
        const role = getRole()
        if (role !== '0') {
          this.$goPage('booking', {
            product_id: this.firstProd.product_id
          })
          return
        }
        // 游客请求加密传后跳转
        getResubmitSecret({
          order_no: this.data.order_no
        }).then(res => {
          const data = res.data
          this.$goPage('booking', {
            product_id: data.product_id,
            secret: data.secret
          })
        }).catch(err => {})
      },

      onPayment() {
        this.$goPage('payment', {
          type: 1,
          order_no: this.data.order_no
        })
      },

      async doResendSms() {
        Dialog.confirm({
          message: `向预订人手机发送短信`
        }).then(() => {
          // TODO: 第二次发送需输入验证码
          Toast.loading({
            duration: 10000,
            forbidClick: true
          })
          resendSms({
            order_no: this.data.order_no,
          }).then(res => {
            Toast.success('发送成功!')
          })
        })
      },

      async onCancel() {
        Dialog.confirm({
          message: '确定取消订单？'
        }).then(() => {
          cancelOrder({
            order_no: this.data.order_no,
          }).then(res => {
            Toast.success('取消成功!')
            this.$emit('doReload')
          })
        })
      },

      async onDelt() {
        Dialog.confirm({
          message: '确定删除订单？'
        }).then(() => {
          deltOrder({
            order_no: this.data.order_no,
          }).then(res => {
            Toast.success('删除成功!')
            this.$emit('doReload')
          })
        })
      },

    },
  }
</script>

<style lang="less" scoped>
  @import "~@style_m/basic/utils/index";
  @import "~@style_m/components/panel";

  .van-tag--primary {
    padding-right: .8em;
    padding-left: .8em;
    color: @color-main;
    background-color: @color-main-bg;
  }
</style>
